import React, {useEffect} from 'react';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import {Button, Container, Grid, Paper, Stack, ThemeProvider, Typography} from "@mui/material";
import PubSub from 'pubsub-js'
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';
import './PlayList.css'
import {createTheme} from "@mui/material/styles";
import {useLocation} from "react-router-dom"
import MusicCard from "../MusicCard/MusicCard";
import MyTable from "./MyTable";
import _ from "lodash";
import Loading from "../Loading/Loading";

const {get163PlayListDetail} = require("../../utils/request/163request")
const {getQPlayListDetail} = require("../../utils/request/qrequest")
const {getKgPlayListDetail} = require("../../utils/request/kgrequest")
const {getMgPlayListDetail} = require("../../utils/request/migurequest")
const {getKwPlayListDetail} = require("../../utils/request/kwrequest")

const theme = createTheme({
    palette: {
        myred: {
            main: '#ff0202',
            contrastText: 'white',
            light: '#ff0202'
        },
    },
});
export default function PlayList(props){

    const [info,setInfo] = React.useState({});
    const [cards,setCards] = React.useState([]);
    const [loading,setLoading] = React.useState(false);
    let {state:{id,from,auth,allList}} = useLocation();


    useEffect(() => {
        let token = PubSub.subscribe('changeListPage',changePage);
        init();

        return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
            PubSub.unsubscribe(token);
        }
    }, []) // 如果指定的是[], 回调函数只会在第一次render()后执行
    const rows = info.list || []

    function changePage (msg,data) {
        id = data.id;
        from = data.from;
        auth = data.auth;
        init();
    }
    function addAll(){

        PubSub.publish("addAllMusic",{from:from,rows:rows})


    }
    function collectAll(){

        PubSub.publish("collectAllMusic",{from:from,rows:rows})


    }
    function init(){
        setCards(_.shuffle(allList).slice(0,3))
        setLoading(true);
        if(from === '163'){
            get163PlayListDetail(id,(r) => {
                setInfo(r)
            }).then(() => {
                setLoading(false);
            }).catch(() => {
                setLoading(false);
            })
        }else if(from === 'kugou'){
            getKgPlayListDetail(id,(r) => {
                setInfo(r)
            }).then(() => {
                setLoading(false);
            }).catch(() => {
                setLoading(false);
            })
        }
        else if(from === 'kuwo'){

            getKwPlayListDetail(id,(r) => {
                setInfo(r)
            }).then(() => {
                setLoading(false);
            }).catch(() => {
                setLoading(false);
            })
        }
        else if(from === 'migu'){

            getMgPlayListDetail(id,(r) => {
                r.user = auth
                setInfo(r)
            }).then(() => {
                setLoading(false);
            }).catch(() => {
                setLoading(false);
            })
        }
        else if(from === 'qq'){

            getQPlayListDetail(id,(r) => {

                setInfo(r)
            }).then(() => {
                setLoading(false);
            }).catch(() => {
                setLoading(false);
            })
        }
    }
    return (
        <Container maxWidth="xl" sx={{marginTop:1}}>
            <Paper className='page' elevation={3}>
                <Loading open={loading}/>
                <Grid container
                      direction="row"
                >
                    <Grid item xs={8}>
                        <Grid container direction="column">
                            <Paper elevation={3}>
                                <Grid container direction="row">
                                    <Grid item xs={3}>
                                        <img src={info.img} width='270px' height='270px'/>
                                    </Grid>
                                    <Grid item xs={9}>
                                        <div className='textContent'>
                                            <Typography sx={{marginTop:1}} variant="h4"  gutterBottom component="div">
                                                {info.name}
                                            </Typography>
                                            <Grid container direction="row">
                                                <AccountCircleOutlinedIcon/>

                                                <Typography  className='auth' variant="overline" fontSize='15px'  display="block" gutterBottom>
                                                    {info.user}
                                                </Typography>
                                            </Grid>
                                            <Typography maxHeight={100}  maxWidth={800}  overflow={"auto"} variant="subtitle1" gutterBottom component="div">
                                                介绍： {info.description}
                                            </Typography>
                                            <Typography variant="subtitle2" gutterBottom component="div">
                                                标签：{info.tags}
                                            </Typography>
                                            <Typography variant="subtitle2" gutterBottom component="div">
                                                播放量：{info.playCount}
                                            </Typography>
                                            <Typography variant="subtitle2" gutterBottom component="div">
                                                收藏量：{info.subscribedCount}
                                            </Typography>
                                            <Grid container padding={1}>
                                                <ThemeProvider theme={theme}>
                                                    <Button className='playAllBtn' variant="contained" color='myred' onClick={addAll}><PlayArrowOutlinedIcon/>播放全部</Button>
                                                    <Button className='collectBtn' variant="outlined" color='myred' onClick={collectAll}>收藏</Button>
                                                </ThemeProvider>
                                            </Grid>
                                        </div>
                                    </Grid>
                                </Grid>
                            </Paper>
                            <Grid container direction="row" marginBottom={8}>
                                <Grid item xs={12}>
                                    <MyTable from={from} rows={rows}/>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="column" alignItems="center" justifyContent="center" item xs={4}>

                        <Stack spacing={2}>
                            {cards.map((r) => {
                                if(r.id !== info.id ) {

                                    return(<Grid key={r.id+'G'} item className='musics' xs={12}>
                                            <MusicCard className='cards' loading={false} key={r.id} changePage={true} {...r}/>
                                         </Grid>
                                    )
                                }else {
                                    return ""
                                }
                            })}
                        </Stack>
                    </Grid>
                </Grid>
            </Paper>

        </Container>
    );


}
